<template>
    <div class="qilin-QilinForm">
        <QilinExplain title="提交表单组件" date="2023-09-21">
            <template v-slot:content>
                <QilinForm v-model:formConfig="formConfig" ref="formConfigRef"></QilinForm>
                <CodeMirror :codeValue="getCodeValue"></CodeMirror>
            </template>
        </QilinExplain>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/
// 获取提交表单组件元素DOM
const formConfigRef=ref(null);


/*
    计算属性等代码区域
*/
// 提交表单组件逻辑代码
const getCodeValue=computed(()=>{
    return `
        // 占位元素
        <QilinForm v-model:formConfig="formConfig" ref="formConfigRef"></QilinForm>

        // 校验确认密码事件监听
        const checkConfirmPassword=(rule,value,callback)=>{
            console.log(rule,value,callback);
        };
        // 点击提交按钮事件监听
        const submitUpdatePassword=(formRef)=>{
            console.log(formRef);
        };
        // 表单配置项
        const formConfig=reactive({
            elFormConfig:{
                labelWidth:"120px"
            },
            itemConfig:[
                {
                    labelName:"身份证号码",
                    dataName:"idCards",
                    type:"input",
                    inputType:"number",
                    width:24,
                    validate:[
                        {
                            required:true,
                            message:"请输入身份证号码",
                            trigger:"blur"
                        }
                    ],
                    otherValidate:"idCardValidator"
                },
                {
                    labelName:"输入密码",
                    dataName:"password",
                    type:"input",
                    inputType:"password",
                    autocomplete:"off",
                    showPassword:true,
                    placeholder:"8-16位字符，包含英文字母、数字及特殊字符",
                    width:24,
                    validate:[
                        {
                            required:true,
                            message:"请输入密码",
                            trigger:"blur"
                        }
                    ],
                    otherValidate:"salaryPasswordValidator"
                },
                {
                    labelName:"确认密码",
                    dataName:"confirmPassword",
                    type:"input",
                    inputType:"password",
                    autocomplete:"off",
                    showPassword:true,
                    placeholder:"8-16位字符，包含英文字母、数字及特殊字符",
                    width:24,
                    validate:[
                        {
                            required:true,
                            validator:checkConfirmPassword,
                            trigger:"blur",
                            type:"updatePassword"
                        }
                    ]
                }
            ],
            buttonConfig:[
                {
                    btnName:"确定",
                    type:"primary",
                    round:true,
                    style:"margin-left:60px;margin-top:20px;",
                    formRefName:formConfigRef,
                    click:submitUpdatePassword
                },
                {
                    btnName:"取消",
                    type:"default",
                    round:true,
                    style:"margin-top:20px;",
                    formRefName:formConfigRef,
                    click:()=>{console.log(111)}
                }
            ],
            submitData:{
                idCards:"",
                password:"",
                confirmPassword:""
            }
        });
        // 配置项代码注释
        formConfig:{
            type:Object,
            default(){
                return {
                    // el-form标签上的相关配置
                    elFormConfig:{
                        labelPosition:"right", //label对齐方式--默认right
                        labelWidth:"60px", //label宽度--默认60px
                        labelSuffix:":", //label后缀--默认：
                        size:"default", //el-form的大小--默认default
                        className:"" //el-form的自定义类名
                    },
                    // 表单结构相关配置项
                    itemConfig:[
                        {
                            dataName:"name", //对应后台数据名
                            labelName:"姓名", //label名称
                            hideLabel:false, //是否隐藏label字段
                            type:"input", //表单组件类型--默认为input
                            dateType:"date", //时间选择器类型--默认为date--当type为date时生效
                            format:"YYYY-MM-DD HH:mm:ss", //时间格式化配置--默认YYYY-MM-DD HH:mm:ss--当type为date时生效
                            valueFormat:"YYYY-MM-DD HH:mm:ss", //时间格式化配置--默认YYYY-MM-DD HH:mm:ss--当type为date时生效
                            startPlaceholder:"", //日期开始提示语--当type为date时生效
                            endPlaceholder:"", //日期结束提示语--当type为date时生效
                            dataListName:"", //下拉数据名对应selectLists中属性--当type为select时生效
                            inputType:"text", //表单input类型--默认为text--仅当type为input时生效
                            number:"", //当输入框为数字输入框时，允许输入的整数位数
                            decimal:"", //当输入框为数字输入框时，允许输入的小数位数
                            prefixIcon:"", //输入框前置内置图标
                            prefixSlotName:"", //输入框前置内置图标插槽名称
                            suffixIcon:"", //输入框后置内置图标
                            suffixSlotName:"", //输入框后置内置图标插槽名称
                            selectOptionValueName:"value", //下拉选项中的value对应的字段名，默认为value
                            selectOptionLabelName:"label", //下拉选项中的label对应的字段名，默认为label
                            width:24, //表单item的栅栏占比宽度--默认24
                            className:"", //el-form-item的自定义类名
                            clearable:true, //是否可以一键清空--默认true
                            disabled:false, //是否禁用--默认false
                            placeholder:"", //表单提示语
                            showPassword:false, //是否显示密码--默认false--当inputType为password生效
                            rows:2, //行高--默认2--当inputType为textarea生效
                            multiple:false, //是否可以多选--默认false
                            collapseTags:false, //多选时是否将选中值按文字的形式展示--默认false--当type为select时生效
                            filterable:true, //是否可搜索--默认true--当type为select时生效
                            cascaderProps:{ //配置级联选择的配置项--当type为cascader时生效
                                expandTrigger:"click", //次级菜单的展开方式，click、hover
                                multiple:false, //是否多选
                                checkStrictly:false, //是否严格的遵守父子节点不互相关联
                                emitPath:true, //在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置false，则只返回该节点的值
                                lazy:false, //是否动态加载子节点，需与lazyLoad方法结合使用
                                lazyLoad:"event", //加载动态数据的方法，仅在lazy为true时生效
                                value:"value", //指定选项的值为选项对象的某个属性值
                                label:"label", //指定选项标签为选项对象的某个属性值
                                children:"children", //指定选项的子选项为选项对象的某个属性值
                                disabled:"disabled", //指定选项的禁用为选项对象的某个属性值
                                leaf:"leaf", //指定选项的叶子节点的标志为选项对象的某个属性值
                                hoverThreshold:500 //hover时展开菜单的灵敏度阈值
                            },
                            slotName:"", //slot具名插槽名称
                            maxlength:"", //最大输入长度
                            minlength:"", //最小输入长度
                            max:"", //最大输入数字
                            min:"", //最小输入数字
                            controlsPosition:"", //数字输入框的控制按钮位置
                            size:"default", //switch的大小，默认default
                            activeText:"", //switch打开时的文字描述
                            inactiveText:"", //switch关闭时的文字描述
                            activeValue:"", //switch状态为on时的值
                            inactiveValue:"", //switch状态为off时的值
                            style:"", //额外行内样式
                            itemStyle:"", //额外的el-form-item的样式
                            loadMore:"event", //下拉滚动加载事件--当type为select时生效
                            change:"event", //change事件
                            clear:"event", //clear事件
                            loading:false,
                            remote:false,
                            autocomplete:"off", //点击密码框是否提示快捷密码，默认off不提示
                            defaultTime:new Date(2000,1,1,8,30,0), // 当选择时间时默认选中的时分秒时刻，默认8点半
                        }
                    ],
                    // 下拉数据集
                    selectLists:{},
                    // 提交到后台的数据集
                    submitData:{},
                    // 表单底部操作提交按钮相关配置项
                    buttonConfig:[
                        // {
                        //     btnName:"按钮", //按钮名称
                        //     type:"primary", //按钮类型
                        //     size:"default", //按钮大小
                        //     className:"", //按钮自定义类名
                        //     formRefName:"", //表单元素DOM
                        //     click:"event" //点击事件
                        // }
                    ],
                    buttonConfigClassName:"" //表单底部按钮自定义类名
                };
            }
        }
    `
});


/*
    逻辑脚本代码区域
*/
// 校验确认密码事件监听
const checkConfirmPassword=(rule,value,callback)=>{
    console.log(rule,value,callback);
};
// 点击提交按钮事件监听
const submitUpdatePassword=(formRef)=>{
    console.log(formRef);
};

// 表单配置项
const formConfig=reactive({
    elFormConfig:{
        labelWidth:"120px"
    },
    itemConfig:[
        {
            labelName:"身份证号码",
            dataName:"idCards",
            type:"input",
            inputType:"number",
            width:24,
            validate:[
                {
                    required:true,
                    message:"请输入身份证号码",
                    trigger:"blur"
                }
            ],
            otherValidate:"idCardValidator"
        },
        {
            labelName:"输入密码",
            dataName:"password",
            type:"input",
            inputType:"password",
            autocomplete:"off",
            showPassword:true,
            placeholder:"8-16位字符，包含英文字母、数字及特殊字符",
            width:24,
            validate:[
                {
                    required:true,
                    message:"请输入密码",
                    trigger:"blur"
                }
            ],
            otherValidate:"salaryPasswordValidator"
        },
        {
            labelName:"确认密码",
            dataName:"confirmPassword",
            type:"input",
            inputType:"password",
            autocomplete:"off",
            showPassword:true,
            placeholder:"8-16位字符，包含英文字母、数字及特殊字符",
            width:24,
            validate:[
                {
                    required:true,
                    validator:checkConfirmPassword,
                    trigger:"blur",
                    type:"updatePassword"
                }
            ]
        }
    ],
    buttonConfig:[
        {
            btnName:"确定",
            type:"primary",
            round:true,
            style:"margin-left:60px;margin-top:20px;",
            formRefName:formConfigRef,
            click:submitUpdatePassword
        },
        {
            btnName:"取消",
            type:"default",
            round:true,
            style:"margin-top:20px;",
            formRefName:formConfigRef,
            click:()=>{console.log(111)}
        }
    ],
    submitData:{
        idCards:"",
        password:"",
        confirmPassword:""
    }
});


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>
.qilin-{

}
</style>
